<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	  xmlns:permission="http://111.67.194.242/permission"
	  layout:decorate="frame/rightBarFrame">
<head>
	<title>搜索</title>
	<!-- 这里可以引入该页面css文件 -->
	<link rel="stylesheet" type="text/css" href="/css/jquery.page.css">
	<link rel="stylesheet" type="text/css" href="/css/cardCreator.css">
	<link rel="stylesheet" type="text/css" href="/css/search.css">
	<link rel="stylesheet" type="text/css" href="/css/logo.css">
	<script src="/js/suggestBox.js"></script>
	<script src="/js/jquery.page.js"></script>
	<script src="/js/CardCreator.js"></script>
</head>
<body>
<div >
	<div layout:fragment="content">
		<div style="display: none;" id="hidden">
			<form  target="_blank" method="get" action="/play" id="form">
				<input name="tvid" type="hidden" />
				<input name="platform" type="hidden" />
				<input name="docid" type="hidden" />
				<input name="url" type="hidden" />
				<input name="data" type="hidden"/>
				<input type="submit" >
			</form>
			<a href="#" target="_blank"><span id="open"></span></a>
		</div>

		<div style="width: 100%; height: 100%;">
			<div class="background"></div>
			<div>
				<div id="progressBox"></div>
				<div class="searchBox">
					<div class="innerBox">
						<form class="searchContentBox">
							<select name="platform" class="platformSelect">
								<option th:each="search:${searchList}" th:value="${search.val}" th:text="${search.text}"></option>
							</select>

							<span class="searchBar">
							<input id="search" type="text" class="search" name="key" autocomplete="off"/>
						</span>
							<span class="searchBtnBox">
						<button id="searchBtn" class="searchBtn">
							<i class="fa fa-search"></i>
							<span>搜索</span>
						</button>
					</span>
						</form>
						<div class="suggestBox" id="suggestBox">
							<!--<div class="suggestItem" index="0" key="迪迦奥特曼">迪迦奥特曼</div>
                            <div class="suggestItem" index="1" key="泰罗奥特曼">泰罗奥特曼</div>
                            <div class="suggestItem" index="2" key="欧布奥特曼" >欧布奥特曼</div>
                            <div class="suggestItem" index="3">泽塔奥特曼</div>
                            <div class="suggestItem" index="4">盖亚奥特曼</div>-->
						</div>
					</div>
				</div>
			</div>

			<div class="contentBox" style="height: calc(100% - 75px);">
				<div class="content">
					<div id="tips"></div>
					<div class="cardBoxContent hidden" id="positionCard">
					</div>
					<ul class="cardBoxContent" id="listCardContent">
					</ul>
				</div>
				<div id="page"></div>

				<div class="footer">
					<div id="verse">
						[( ${config.verse} )]
					</div>
					<div id="announce">
						<p>本站内容均从互联网收集而来，仅供交流学习使用，版权归原创者所有</p>
						<p >如有侵犯了您的权益，尽请通知我们，本站将及时删除侵权内容。</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div layout:fragment="toolbar">
		<a permission:login href="/user/history" title="历史记录"><i class="frame_jfa fa fa-book"></i></a>
	</div>

	<div layout:fragment="script">
		<script>
			// 90page
			$(".content").css("min-height", $(".contentBox").height() - $(".footer").height() - 90 - 3);

			var tipsBox = {};
			var searcher = {};

			SuggestBox({
				rootDom: $("#suggestBox"),
				activeClass: "activeSuggestItem",
				onChange: function(old ,newDom){
					searcher.text($(newDom).text());
				},
				onSelected: function(selected){
					searcher.search($(selected).text());
				}
			}, tipsBox);
			SuggestBox.suggest(util.getParameter().get("key"), function(list){
				var suggestBox = document.getElementById("suggestBox");
				suggestBox.innerHTML = "";
				for(var i = 0, l = list.length; i < l; i ++){
					var item = list[i];
					var li = util.createTag("div", "suggestItem");
					li.setAttribute("key", item);
					li.innerHTML = item;
					suggestBox.appendChild(li);
				}
			})
			Search({
				dom: $("#search"),
				focus: () => tipsBox.show(),
				blur: () => tipsBox.hide(),
				input: (e) => SuggestBox.suggest($(e.target).val()),
				submit: (text) => {tipsBox.hide();$("#searchBtn").click();}
			}, searcher);

			$(document.body).css("opacity", "0");
			$(document.body).animate({opacity:1}, 500);
			var resultCache = [];
			var __page__ = [( ${list} )];

			let page = __page__.data;
			if (page.currentPage <= page.pageAll) {
				$("#page").Page({
					totalPages: page.pageAll,//分页总数
					liNums: 5,//分页的数字按钮数(建议取奇数)
					activeClass: 'activP', //active 类样式定义
					currentPage: page.currentPage,
					hasPrv: false,
					hasNext: false,
					callBack : function(page, prePage){
						if (location.href.indexOf("page=" + prePage) != -1 ) {
							util.redirect(location.href.replace("page="+prePage, "page="+page));
						}
						else {
							util.redirect(location.href + "&page=" + page);
						}
					}
				})
			}

			var key = util.getParameter().get("key");
			searcher.text(key);
			// 初始化搜索引擎
			let platform = util.getParameter().get("platform");
			platform = util.getDefault(platform, "iqiyi");
			$("select [value="+platform+"]").attr("selected", true);

			var cardCreator = new CardCreator();
			var positionBox = document.getElementById("positionCard");
			positionBox.appendChild( cardCreator.createPositionCard() );

			var cardCache = document.createElement("div");
			var config = {errImg: '[[${config.errImg}]]'};
			var result = __page__;
			if (result.code == 0){
				if (result.data.list.length == 0){
					document.getElementById("tips").innerHTML = "<h2 class='msginfo'>暂未搜索到“"+key+"”相关信息</h2>"
				}
				var data = util.getArrayDefault(result.data, "list", []);
				resultCache = util.clone(data);
				for(var i = 0, l = data.length; i < l; i ++){
					data[i].index = i;
					var b = cardCreator.createCard(data[i], document.body, config);
					cardCache.appendChild(b);
				}
			}
			else{
				document.getElementById("tips").innerHTML = "<h2 class='msginfo'>接口错误："+result.msg+"</h2>";
			}
			document.getElementById("listCardContent").innerHTML = cardCache.innerHTML;

			$(".cardBoxContent").delegate( "a", "click", function(e){
				e.preventDefault();
				if ( !$(e.currentTarget).parent().is(".episode_block_more") ){
					var index = $(e.currentTarget).parents(".card").attr("index");
					var docid = $(e.currentTarget).parents(".card").attr("docid");
					var tvid = $(e.currentTarget).attr("tvid");
					var platform = $(e.currentTarget).attr("platform");
					var url = $(e.currentTarget).attr("url");

					if (platform == "qq" || platform == "imgo"){
						var paths = url.split("/");
						tvid = paths[paths.length-1];
						tvid = tvid.substring(0, tvid.indexOf("."));
						docid = paths[paths.length-2];
						if (docid == "cover"){
							docid = tvid;
							tvid = "";
						}
						url = null;
					}

					if (platform == "youku"){
						var paths = url.split("/");
						tvid = paths[paths.length-1];
						tvid = tvid.substring(0, tvid.indexOf("."));
						tvid = tvid.substring(3);
						url = null;
					}

					if (platform == "bilibili"){
						var paths = url.split("/");
						tvid = paths[paths.length-1];
						var index = tvid.indexOf("?");
						if (index != -1){
							tvid = tvid.substring(0, index);
						}
						docid = tvid;
						url = null;
					}
					var data = "";
					if ( tvid == "undefined" || tvid == "null" || tvid == ""){
						data = JSON.stringify(resultCache[index]);
					}
					$("#form").find("input[name=data]").val( data );
					$("#form").find("input[name=url]").val(util.getDefault(url, "", true));
					$("#form").find("input[name=platform]").val( util.getDefault(platform, "", true));
					$("#form").find("input[name=tvid]").val(  util.getDefault(tvid, "", true));
					$("#form").find("input[name=docid]").val(  util.getDefault(docid, "", true));
					$("#form").find("input[type=submit]").click();
				}
			});
			$(".cardBoxContent").delegate(".episode_block", "click", function(e){
				if ( $(e.currentTarget).is(".episode_block_more") ){
					var parent = $(e.currentTarget).parent();
					parent.find(".episode_block_hidden").css("display", "block");
					$(e.currentTarget).css("display", "none");
					parent.parent().find(".fold_episode_block_hidden").css("visibility", "visible");
				}
			})
			$(".cardBoxContent").delegate(".fold_episode_block_hidden", "click", function(e){
				var parent = $(e.currentTarget).parent();
				parent.find(".episode_block_hidden").css("display", "none");
				parent.find(".episode_block_more").css("display", "block");
				$(e.currentTarget).css("visibility", "hidden");
			})
		</script>
	</div>
</div>
</body>
</html>
